.p-home {

    h2 {
        margin-bottom: .25rem;
        text-align: center;
        font-size: 1.625rem;
        font-weight: bold;

        &.subTitle {
            margin-bottom: 3rem;
            font-size: .8125rem;
            font-weight: normal;
        }
    }

    // 走马灯广告位
    .banner {
        // height: 10rem;
        position: relative;

        .m-navbar {
            position: absolute;
            top: 0;

        }

        .ant-carousel .slick-slide {
            .carousel-item {
                position: relative;

                .img {
                    height: 33rem;
                    background-size: cover;
                    background-position: center;
                }

                .content {
                    position: absolute;
                    top: 0;
                    padding-top: 9rem;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    color: #fff;

                    h3 {
                        margin-bottom: 0;
                        font-size: 5rem;
                        font-style: italic;
                        /* font-weight: bold; */
                        letter-spacing: .25rem;
                    }

                    .desc {
                        font-size: 1rem;
                        letter-spacing: .15rem;
                        color: rgba(255, 255, 255, .8);
                        margin-bottom: 2rem;
                    }

                    button {
                        font-size: .8125rem;
                        letter-spacing: .125rem;
                    }
                }

            }
        }
    }

    // 信息展示
    .informationDisplay {
        margin-bottom: 4rem;
        padding: 2.5rem 0 .875rem;
        background-color: #f5f5f5;

        .container {
            display: flex;

            .l {
                flex-basis: 75%;

                .mainNumbers {
                    margin-bottom: .75rem;
                    padding: .875rem;
                    color: #fff;
                    background-color: @primary-color;

                    ul {
                        display: flex;
                        justify-content: space-around;

                        li {
                            text-align: center;

                            h4 {
                                position: relative;
                                font-size: .875rem;
                                margin-bottom: .5rem;

                                &::after {
                                    content: '';
                                    display: inline-block;
                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 2rem;
                                    height: 1px;
                                    background-color: #fff;
                                    bottom: -.5rem;

                                }
                            }

                            .num {
                                font-size: 1.75rem;
                            }
                        }
                    }
                }

                .videoWrap {
                    background-color: black;

                    video {
                        width: 100%;
                    }
                }

            }

            .r {

                flex-basis: 25%;
                display: flex;

                .serviceHours {
                    flex: 1;
                    margin-left: 2rem;
                    padding: 0 1rem;
                    background-color: #fff;

                    header {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 1rem;
                        line-height: 3.375rem; // 加上1px底边正好凑偶数
                        font-weight: bold;
                        border-bottom: .0625rem solid @primary-color;

                        h3 {
                            font-size: 1.125rem;
                            font-weight: bold;
                        }

                        .more {
                            font-size: .75rem;
                        }
                    }

                    ul {
                        text-align: center;

                        li {
                            margin-bottom: .3125rem;
                            line-height: 3rem;
                            font-size: .875rem;
                            color: #fff
                        }
                    }
                }

            }
        }

    }

    @media (min-width: 1680px) {
        .informationDisplay .r {
            .serviceHours {
                padding-bottom: 1.125rem !important;

                header {
                    line-height: 4rem !important;
                }

                ul>li {
                    margin-bottom: .4375rem !important;
                }
            }

        }
    }

    // 活动分类
    .activeTypes {
        margin-bottom: 2rem;
        text-align: center;

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                margin-bottom: 2rem;
                flex-basis: calc((100% - 3rem) / 4);
                color: #fff;
                background-position: center;
                background-size: cover;
                cursor: pointer;

                a {
                    color: #fff;

                    &:hover {
                        color: #fff
                    }

                    .desc {
                        visibility: hidden;
                        padding: 1rem 2rem;
                        height: 12rem;
                        font-size: .875rem;
                        text-align: left;
                        line-height: 1.75rem;
                        display: -webkit-box;
                        -webkit-line-clamp: 6;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        transition: background .33s;
                    }

                    h3 {
                        line-height: 3.37rem;
                        font-size: .875rem;
                        letter-spacing: .0625rem;
                        background-color: @primary-color;
                        font-weight: bold;
                    }
                }


                &:hover {
                    .desc {
                        visibility: visible;
                        background-color: rgba(217, 28, 24, .7)
                    }
                }
            }
        }
    }

    // 三大块入口
    .quickEntrance {
        margin-bottom: 4rem;
        height: 24rem;
        text-align: center;
        color: #fff;
        background: url(../../assets/img/bg_mountains.jpg) center bottom;
        background-size: cover;

        a {
            color: inherit;
        }

        ul.type {
            display: flex;
            align-items: flex-start;

            &>li {
                flex: 1;
                padding: 2rem 2rem 1.5rem;
                background-color: @primary-color;

                .iconWrap {
                    margin: 0 auto;
                    width: 5rem;
                    height: 5rem;
                    background-position: center;
                    background-size: contain;
                    background-repeat: no-repeat;

                    .iconfont {
                        line-height: 4rem;
                        font-size: 2.25rem;
                    }
                }

                h3 {
                    font-size: 1.1875rem;
                }

                ul.link {
                    display: none;
                    margin-top: 1.5rem;
                    height: 12.375rem;

                    &>li {
                        a {
                            display: inline-block;
                            width: 100%;
                            font-size: .875rem;
                            line-height: 2.0625rem;

                            &:hover {
                                color: @primary-color;
                                background-color: #fff;
                            }
                        }

                    }
                }

                &:hover {
                    ul.link {
                        display: block
                    }
                }
            }
        }
    }

    // 义工风采和活动风采
    .volunteersAndActivities {
        margin-bottom: 4rem;

        ul.tab-header {
            margin-bottom: 3rem;

            li {
                padding: 0 4.5rem;

                h2 {
                    margin-bottom: .25rem;
                    font-size: 1.625rem;
                    font-weight: bold;
                    letter-spacing: .1875rem;

                    &.subTitle {
                        // margin-top: 1rem;
                        font-size: .8125rem;
                        font-weight: normal;
                        letter-spacing: 0;
                    }
                }

                &~li {
                    border-left: .0625rem solid @primary-color;
                }

                &.active h2 {
                    color: @primary-color
                }
            }
        }

        .tab-body {
            height: 36rem;

            .tab-item {
                position: relative;
                height: 100%;

                ul.volunteers,
                ul.activities {
                    display: flex;
                    flex-wrap: wrap;

                    li.item {
                        flex-basis: 50%;

                        a {
                            display: flex;
                            margin-bottom: 1.5rem;
                            height: 9rem;

                            .l {
                                background-size: cover;
                                background-position: center;
                                flex-basis: 16rem;
                                flex-shrink: 0;

                            }

                            .r {
                                padding: .25rem 2rem .25rem 1rem;

                                .name {
                                    margin-bottom: .5rem;
                                    font-size: 1.125rem;
                                    font-weight: bold;
                                }

                                .identity {
                                    margin-bottom: .75rem;
                                    font-size: 1rem;
                                    font-weight: bold;
                                }

                                .desc {
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    -webkit-box-orient: vertical;
                                    line-height: 1.25rem;
                                    font-size: .75rem;
                                    color: #999;
                                    overflow: hidden;
                                }
                            }

                            &:hover {
                                cursor: pointer;

                                * {
                                    color: @primary-color  !important;
                                }

                            }
                        }
                    }

                }

                .paginationWrap {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }


            }

        }

    }

    .partners {
        margin-bottom: 4rem;

        header {
            position: relative;

            .more {
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }

        .list {
            display: flex;
            flex-wrap: wrap;

            li {
                display: flex;
                padding: 1rem;
                width: calc(100% / 6);
                height: 6rem;
                border: .0625rem solid #ddd;
                border-left: none;
                border-top: none;

                &:nth-of-type(6n+1) {
                    border-left: .0625rem solid #ddd;
                }

                &:nth-of-type(-n+6) {
                    border-top: .0625rem solid #ddd;
                }

                a {
                    flex: 1;

                    .img {
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                        filter: drop-shadow(.0625rem .0625rem .0625rem rgba(0, 0, 0, .5));
                    }
                }

            }
        }
    }

}